<template>
    <view class="inviteStyle">
        <view class="inviteRules">
            <scroll-view scroll-y="true" class="inviteRulesArea">
                <rich-text space="nbsp" :nodes="shareRichText"></rich-text>
            </scroll-view>
            <button open-type="share" class="shareButton">立即分享</button>
        </view>
        <view class="line"></view>
        <view class="inviteRecord">
            <view class="recordTitle">
                <view class="titleText"> 分享记录 </view>
                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/shareRecord.png" class="shareRecordIcon" mode="scaleToFill"></image>
            </view>
            <view v-if="recordList.length > 0" class="recordList">
                <view class="recordItem" v-for="(item, index) in recordList" :key="index">
                    <view class="inviteUser">
                        <view class="userName">{{ item.bussKey }}</view>
                        <view class="userTime">{{ item.createTime }}</view>
                    </view>
                    <view class="inviteIntegral"
                        >+{{ item.score }}
                        <text class="integralUnit"> 积分</text>
                    </view>
                </view>
            </view>
            <view v-if="recordList.length === 0 && loading == false" class="emptyArea">
                <image
                    style="width: 316rpx; height: 316rpx; margin-top: 30rpx"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
                ></image>
                <label style="margin: 20rpx; color: #272a37; font-size: 28rpx; line-height: 36rpx">暂无记录</label>
            </view>
        </view>
    </view>
</template>

<script>
import request from '@/common/api/request.js';
import { mapState } from 'vuex';
import utils from '@/common/utils.js';

export default {
    name: 'invite',
    data() {
        return {
            request,
            shareConfig: {},
            recordList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 4,
            },
            loading: false,
            noMore: false,
        };
    },
    onLoad() {
        this.getDetail();
    },
    onShow() {
        this.getRecord();
    },
    onPullDownRefresh() {
        this.noMore = false;
        this.queryParams.pageNum = 1;
        this.getDetail();
        this.getRecord();
    },
    onReachBottom() {
        if (this.noMore) {
            return;
        }
        this.queryParams.pageNum += 1;
        this.getRecord();
    },
    methods: {
        async getDetail() {
            const { data } = await this.request.httpTokenJsonRequest(
                '/mp-api/wx/mall/config/queryByKey',
                {
                    key: 'shareConfig',
                },
                'GET',
            );
            this.shareConfig = data || {};
        },
        async getRecord() {
            if (this.noMore) {
                return;
            }
            this.loading = true;
            try {
                const { data } = await this.request.httpTokenJsonRequest(
                    '/mp-api/wx/my/shareRecord',
                    this.queryParams,
                    'GET',
                );
                this.recordList = utils.filterRepetition([...this.recordList, ...data.list]);
                if (data.total <= this.recordList.length) {
                    this.noMore = true;
                }
            } catch (e) {}

            this.loading = false;
            uni.stopPullDownRefresh();
        },
    },
    onShareAppMessage(res) {
        let title = this.shareConfig.inviteText.replace('${用户昵称}', this.userInfo.nickname);
        return {
            title,
            imageUrl: this.request.baseUrl + this.shareConfig.inviteImg,
            path: `/packageMine/pages/invited/index?invitId=${this.userInfo.uid}&invitName=${encodeURIComponent(
                this.userInfo.nickname,
            )}`,
            success(res) {
                uni.showToast({
                    title: '分享成功',
                    icon: 'none',
                });
            },
            fail(res) {
                uni.showToast({
                    title: '分享失败',
                    icon: 'none',
                });
            },
        };
    },
    computed: {
        ...mapState(['userInfo']),
        shareRichText() {
            let text = this.shareConfig.rules || '';
            const shareWidth = text.replaceAll('<img', `<img style='max-width:100%;height:auto;'`);
            return shareWidth.replaceAll(
                `<img style='max-width:100%;height:auto;' src="/dev-api`,
                `<img style='max-width:100%;height:auto;' src="${this.request.baseUrl}`,
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.inviteStyle {
    min-height: 100vh;
    background-color: #ffffff;

    .inviteRules {
        position: relative;
        min-height: 400rpx;
        max-height: 1000rpx;

        .inviteRulesArea {
            min-height: 400rpx;
            max-height: 1000rpx;
            padding: 10rpx 20rpx;
            box-sizing: border-box;
        }

        .shareButton {
            position: absolute;
            bottom: 30rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 430rpx;
            height: 88rpx;
            margin: 0;
            padding: 0;
            background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
            box-shadow: 0px 24rpx 48rpx 0px rgba(55, 168, 148, 0.2);
            border-radius: 24rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: 88rpx;
            text-align: center;
        }
    }

    .line {
        height: 16rpx;
        background: #f6f6f6;
    }

    .inviteRecord {
        padding: 30rpx;

        .recordTitle {
            position: relative;
            height: 44rpx;
        }

        .shareRecordIcon {
            position: absolute;
            left: 0;
            width: 100%;
            height: 4rpx;
            top: 20rpx;
        }

        .titleText {
            position: absolute;
            top: 0;
            height: 44rpx;
            text-align: center;
            line-height: 44rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            width: 100%;
        }

        .recordItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 22rpx 0 24rpx;
            border-bottom: 1rpx solid #f4f5f6;
        }

        .inviteUser {
            flex: 1;
        }

        .userName {
            width: 100%;
            height: 40rpx;
            margin-bottom: 8rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
        }

        .userTime {
            height: 34rpx;
            line-height: 34rpx;
            font-size: 24rpx;
            color: #999999;
        }

        .inviteIntegral {
            height: 36rpx;
            line-height: 36rpx;
            font-size: 36rpx;
            font-family: DINCondensed-Bold, DINCondensed;
            font-weight: bold;
            color: #333333;
        }

        .integralUnit {
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
        }
    }

    .emptyArea {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .recordList {
        height: auto;
    }
}
</style>
r
